Avec nos éléments fonctionnels, l'étape suivante consiste à ajouter une navigation de base pour ces éléments.
Cela inclut la sélection d'un élément pour ouvrir et filtrer les éléments avec le champ de recherche ici dans l'application.
Nous allons commencer par le champ de recherche.
Ce que nous voulons, c'est simplement filtrer tous les éléments par titre.
Par exemple, tapez GitHub dans le champ ne devrait laisser que ce premier élément visible car
c'est le seul titre contenant le texte GitHub dans les approches car le champ de recherche fait partie de l'interface utilisateur
de ce sélecteur.
La recherche égale le document n'obtient pas l'élément par I. RÉ. Recherchez l'ID de cette entrée de recherche, puis nous pouvons
ajouter l'auditeur au complet aux éléments lorsque cet élément reçoit une entrée de texte.
Écoute à la recherche.
Quatre clés devront maintenant boucler tous nos éléments pour vérifier chacun d'eux.
Nous pouvons le faire par nom de classe car tous les éléments ont une classe d'éléments.
Mais pour convertir cette collection HDMI en un tableau, nous pouvons dire tableau dot from.
Créez donc un tableau à partir de l'élément dogit de document par élément de lecture de nom de classe.
Juste pour clarifier ce qui se passe ici.
Ce sélecteur d'obtention d'éléments par nom de classe retourne un objet de type collection HTML très similaire à un tableau JavaScript
normal, mais pas tout à fait, nous ne pouvons donc pas le boucler directement mais le passer au tableau JavaScript à
partir de method.
Nous convertissons simplement son type en un tableau standard, ce qui signifie que nous pouvons maintenant le boucler.
Les éléments en désarroi restent exactement les mêmes afin que nous puissions toujours les utiliser.
Nous allons boucler ce tableau avec pour chacun fournissant l'élément dans la fonction de boucle.
Et tout ce que nous voulons faire ici est de masquer tous les éléments qui ne correspondent pas à la valeur de recherche.
Je vais attribuer le résultat de la magie à une grande vérification de l'élément, pas dans un texte, le seul texte étant ce
titre.
Cela fonctionnera donc parfaitement en minuscules.
Aucune raison de vérifier.
Les correspondances sensibles à la casse incluent la valeur de recherche.
La valeur de texte de l'entrée de recherche en tant que correspondance contiendra désormais une valeur booléenne selon que le texte de l'élément correspond
ou non au champ de recherche.
Alors définissez les éléments pertinents.
Afficher la propriété avec l'affichage des points de style point d'élément est égal à l'utilisation d'un opérateur ternaire.
Si has match est vrai, la valeur d'affichage de flex flex est la valeur d'affichage actuelle des éléments else, ce qui signifie
que la recherche ne correspond pas à l'élément none.
Alors cachant l'article.
Enregistrez-le pour tester.
Je vais ajouter un troisième élément pour avoir un peu plus de recherche, vous savez, juste dot org.
Vérifiez à nouveau cette valeur GitHub, et cela ne fonctionne qu'avec le fait d'être suffisamment
unique pour filtrer jusqu'à cet élément unique ne laisse que le nœud et l'excès ne laisse que l'électron.
OK, c'est notre recherche terminée.
Ensuite, nous pouvons implémenter la sélection d'articles.
La raison pour laquelle nous voulons ajouter une sélection d'éléments est que nous n'interagissons pas toujours directement avec les éléments.
N'oubliez pas que cette application aura un menu avec lequel ouvrir des éléments ou même des raccourcis clavier ou des éléments seront mis
en œuvre plus tard.
Ainsi, ouvrir ou supprimer un élément n'est pas toujours aussi simple que de cliquer dessus.
C'est la raison pour laquelle nous voulons toujours qu'un élément sélectionné indique qu'un élément est sélectionné, alors j'ajouterai
une simple bordure à gauche.
Sur le DOCSIS principal de la feuille de style, trouvez la clause d'élément de lecture ici, en ajoutant à tous les éléments la
bordure gauche, 10 pixels solides, gris clair.
Ceci étant la couleur de bordure non sélectionnée, nous pouvons également ajouter une couleur Hova pour rendre le curseur en action un
peu mieux.
Lisez l'article.
Définissez en arrière-plan un gris très clair avec l'élément lu en dernier lieu non sélectionné, de sorte qu'un élément lu avec une classe
sélectionnée donne à ce tableau de gauche une couleur bleu dodger.
Nous pouvons tester cela.
Rechargez la fenêtre.
Le survol fournit maintenant un peu de retour, une petite mais utile amélioration, et lorsque nous ajoutons une classe de
selected à l'un de ces éléments, je le ferai directement.
Dans les outils de développement sélectionnés, nous voyons cette bordure bleue indiquant que cet élément est maintenant sélectionné.
Ajoutons donc cette logique de sélection.
Ensuite, j'ajouterai ceci en tant que nouvelle fonction exportée du module des éléments.
Donc, dans les éléments, Dargis définit l'élément comme sélectionné.
L'appel de la fonction select cette fonction contiendra un objet événement possible lorsqu'elle sera déclenchée par un
clic ou quelque chose de similaire, la première étape étant de sélectionner l'élément actuellement sélectionné ou de supprimer sa
classe sélectionnée.
Obtenez cet élément avec les éléments cibles du document par classe, l'élément de lecture nom sélectionné, dont il ne peut y en
avoir qu'un.
Donc, l'index du tableau zéro accède à la liste des classes des éléments et supprime les éléments sélectionnés.
Ensuite, nous pouvons ajouter la classe à l'élément nouvellement sélectionné ou à l'élément sur lequel vous avez cliqué pour l'instant, en récupérant cet élément à
partir de l'objet d'événement de clic.
Cet argument ici avec la cible actuelle de point e étant l'élément sur lequel on a cliqué.
Ajout de points de liste de classe sélectionné.
OK, nous avons donc maintenant cette fonction que nous pouvons utiliser lorsqu'un élément est cliqué.
Mais ce n'est pas aussi simple que d'ajouter un écouteur de clic sur tous les éléments que lorsque de nouveaux éléments sont ajoutés.
Cet auditeur ne sera pas fixé sur eux.
Nous pouvons donc à la place lier l'écouteur de clic sur chaque élément au fur et à mesure qu'il est ajouté à l'interface de l'application.
L'endroit le plus simple pour ce faire sera dans la fonction AJOUTER immédiatement après avoir ajouté un élément, par
exemple.
Notez le nouvel élément d'élément que nous créons et ajoutons un clic sur l'écouteur d'événement.
Cette sélection de points, donc lorsque vous cliquez sur cet élément, appelez la fonction de sélection avec cet événement de
clic comme chaque argument, un autre ajout utile sera la présélection.
Le premier élément est que lorsque les téléchargements ou une fois que le premier élément est ajouté manuellement, nous
pouvons simplement vérifier combien d'éléments existent dans le conteneur d'éléments si les éléments doget de document par nom de classe lisent l'élément longueur de point étant la
longueur de cette collection HTML, laquelle de Bien sûr, à ce stade, ayant déjà ajouté cet élément,
doit être un ou plusieurs égaux à un.
Donc, seul cet article a été ajouté.
Appelez le premier élément.
Ajout de points sans verre sélectionné.
Enregistrez et testez ceci immédiatement, le premier élément ajouté à partir de nos éléments stockés est déjà sélectionné cliquez pour
sélectionner un élément différent et cela fonctionne.
Maintenant, comme mentionné, nous voulons également pouvoir naviguer dans les éléments à l'aide du clavier.
Ainsi, en utilisant les flèches haut et bas, nous devrions pouvoir sélectionner l'élément précédent ou suivant parmi celui
actuellement sélectionné.
Pour ce faire, je vais revenir aux approches, en conservant notre logique d'interface utilisateur ici.
Naviguez dans la sélection d'éléments avec les flèches vers le haut ou vers le bas.
Cette fois, nous n'écoutons pas un élément spécifique.
Ajoutez donc un écouteur global avec un point de document.
Ajoutez un écouteur d'événement.
Touche Bas.
L'objet événement vérifiant si la touche de point d'événement est égale à la flèche vers le haut.
Ou la touche de point d'événement correspond à la flèche vers le bas.
Articles d'appel, sélection de changement de régime avec le nom de la touche comme clé de point d'argument de fonction.
À cette fonction au module des éléments.
Déplacer vers l'élément nouvellement sélectionné.
Exporter le choix de changement avec cet argument de direction étant soit la flèche vers le haut, soit la flèche vers le bas, la première chose
à déterminer dans cette fonction est alors quel élément est actuellement sélectionné.
Laissez l'élément actuel égal.
Nous obtenons déjà l'élément actuel dans la fonction de sélection.
Alors copiez ceci.
Coller, puis vérifier si nous sélectionnons l'élément précédent ou suivant en vérifiant les flèches vers le haut ou vers le bas
si la direction de cet événement, l'argument clé est égal à la flèche vers le haut.
Et surtout, il existe un élément antérieur à l'élément actuel, que nous pouvons vérifier avec
l'élément actuel point élément précédent frère.
Supprimez cette classe élue de l'élément actuel avec la liste de classe d'élément actuelle.
Retirer.
Et ajouté à l'élément actuel du frère précédent, un élément précédent, une liste de classe de frère, un point, ajoutez, sélectionnez-le
poignée suivante exactement de la même manière que la flèche vers le bas, ce qui signifie sélectionnez l'élément suivant s'il
existe ou bien si.
La direction est égale à la flèche vers le bas.
Et le point de l'élément actuel, le frère de l'élément suivant.
Supprimé, sélectionné comme auparavant dans l'élément actuel.
Et ajouté au prochain frère.
Là, ça devrait sauver.
Le premier élément est élu lors du lancement de l'application, alors appuyez vers le bas et la sélection passe
à l'élément suivant et revient au premier afin que nous puissions très facilement sélectionner un élément avec un clic de souris ou en utilisant le
clavier.
Et finalement, la raison pour laquelle il est possible de sélectionner un élément est de pouvoir l'ouvrir pour la lecture.
Alors ajoutons la première version de cela.
Rester dans les éléments évite d'exporter une nouvelle fonction pour ouvrir l'élément sélectionné.
Appelez ça ouvert.
Aucun argument, la toute première chose en Tchéquie étant de savoir si nous avons des articles ou bien nous arrêterons
d'essayer.
L'exécution de cette vérification garantira que nous n'aurons pas de problèmes plus tard lors de l'utilisation des raccourcis clavier ou
menu pour ouvrir l'élément sélectionné.
Si ce n'est pas cette longueur de stockage, donc aucun élément de la matrice de stockage n'est renvoyé si nous avons des éléments de stockage,
cependant, continuez à obtenir l'élément sélectionné plus tard, l'élément sélectionné équivaut à utiliser à nouveau le même sélecteur.
Je vais copier ça.
Et obtenez les éléments sélectionnés, vous êtes tout cela pour que nous puissions ouvrir cet élément, enregistrer votre URL
pour la lecture, l'attribuer au contenu, tout va bien pour le moment.
Nous n'avons pas de moyen d'obtenir l'URL de l'élément, mais un moyen simple de l'ajouter est en tant qu'attribut de données
sur l'élément d'élément.
Nous pouvons ajouter cela dans une seconde, mais la façon dont nous y accéderons se fait via l'élément ou les éléments sélectionnés.
Jeu de données WRAL.
Le nom donnera à l'attribut data.
Ajoutez-le à tous les éléments lors de leur création dans l'URL d'élément de jeu de fonctions d'ajout en tant qu'attribut de données.
Avec note d'élément, attribut de jeu de points.
Data Desh, vous R-AL, si vous n'êtes pas familier avec les attributs de données, j'ai lié à un court
didacticiel dans les ressources de la leçon et en définissant cela sur point d'élément, vous êtes tous la propriété de cet
objet d'élément.
Nous pouvons tester cette déconnexion de l'URL de l'élément dans la fonction ouverte pour le moment.
Le contenu de l'élément d'ouverture de console ou de journal est neutre que vous soyez.
Eh bien, nous obtenons de l'élément sélectionné via cet attribut de données.
Nous avons encore besoin d'un déclencheur pour cette fonction ouverte.
Encore une fois, ajouter un écouteur dans la fonction ADD lors de la création du nœud d'élément.
Nous utilisons déjà un simple clic pour sélectionner un élément.
Donc, pour ouvrir un élément, nous pouvons utiliser un double-clic à la place du nœud d'élément ajouter un écouteur d'événement, double-cliquez
ou double-cliquez pour appeler ce point ouvert.
En gardant à l'esprit que ce qui se passera ici, c'est que le
premier clic de ce double-clic sélectionnera l'élément selon l'écouteur à un seul clic et le deuxième clic déclenchant le
double-clic appellera la fonction d'ouverture, ouvrant l'élément nouvellement sélectionné.
Sauvegardez tout cela et testez.
Je vais revenir à la console pour que nous puissions voir ce journal ouvert double-cliquez sur ce premier élément et leur élément d'ouverture, GitHub dot
com et même pour l'électron G. S ..
Sélectionnez également l'élément ouvert.
Notez, cependant, que l'utilisation d'un double-clic met désormais en évidence le texte de l'élément.
Ce n'est certainement pas un bon look pour une application de bureau.
Nous avons couvert la résolution de ce problème dans une leçon précédente.
Passons donc à notre feuille de style en ajoutant à nos articles.
L'utilisateur du kit Web ne sélectionne aucune sauvegarde.
Rechargez cette fenêtre.
Et maintenant, tout fonctionne sans aucune sélection, beaucoup mieux dans la prochaine leçon créera la fenêtre pour charger ces éléments
dans lesquels vous êtes tous.